<template>
  <!-- 聊天室 -->
  <div class="jzong">
    <van-nav-bar
      title="急速问诊"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="miao">
      <p style="color: #1e6fff">描述病情</p>
      <p>〉</p>
      <p>匹配医生</p>
      <p>〉</p>
      <p>开始咨询</p>
    </div>
    <div class="fuw">
      <div class="fw">服务保障</div>
      <div class="zhuan">
        <li>·专业医生</li>
        <li>·实名认证</li>
        <li>·多轮沟通</li>
        <li>·超时退款</li>
      </div>
    </div>
    <!-- 风险通知 -->
    <div class="fxtz">
      请您仔细阅读<span>《风险告知及患者知情通知书》</span>，
      如非复诊，我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
    </div>

    <div class="liao">
      <div class="nih">
        <div class="img">
          <img :src="qing" alt="" />
        </div>
        <div class="hua" style="background-color: azure;">
         
          <div
            v-for="(item, index) in lie"
            :key="index"
            :class="item.id == 1 ? 'a' : 'left'"
            @click="qq(item.id)"
          >
            <div v-if="item.id == 1">
              <div v-if="item.flag">
                <img
                  :src="item.message"
                  alt=""
                  style="width: 1rem; height: .8rem"
                  @click="yulan"
                />
               <van-overlay :show="show" @click="show = false">
  <div class="wrapper" >
    <div class="block" >
      <img :src="item.message" alt="" style="width:100%;height:100%">
    </div>
  </div>
</van-overlay>
              </div>
              <div v-else>
                {{ item.message }}
              </div>
            </div>
            <div v-else>
              {{ item.message }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部输入 -->
    <div class="footer">
      <div style="width: 4.7rem">
        <div v-if="imageData" style="width: 4.7rem; float: left">
          <img :src="imageData" alt="Selected Image" style="width: 1rem" />
        </div>
        <el-input
          v-else
          v-model="textarea"
          style="width: 4.7rem; float: left"
          :rows="2"
          type="textarea"
          placeholder="请用5-500字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等，以便医生更好帮助您解决问题。"
        />
      </div>

      <wwss class="bqb" @emoji-selected="hand"></wwss>

      <van-uploader @change="handleFileChange">
        <van-icon
          name="photo"
          style="
            font-size: 0.8rem;
            color: cadetblue;
            line-height: 1rem;
            margin-left: 0.1rem;
          "
        />
      </van-uploader>

      <button @click="send">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import wwss from '../../components/xiaoc/Ws.vue'
const lie: any = ref([]) //页面消息渲染列表   后台返回消息id不为1   前台发送消息的ID为1 根据id渲染左右
const textarea = ref('')
const onClickLeft = () => {
  //  返回上一级
  history.back()
}
const url = ref('')
const qing = ref('')
const qq = (id:number) => {
  if (id == 3) {
    console.log('qq')
  } else {
    console.log('w')
  }
}
const imageData = ref<string | null>(null) // 用于存储图片的 Base64 数据
const imageFile = ref<File | null>(null) // 用于存储选中的文件
// 处理文件选择
const handleFileChange = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    imageFile.value = input.files[0]
    // 使用 FileReader 将图片转换为 Base64
    const reader = new FileReader()
    reader.onloadend = () => {
      imageData.value = reader.result as string
    }
    reader.readAsDataURL(imageFile.value)
  }
}

const ws = new WebSocket('ws://localhost:8080')
ws.onopen = function () {
  console.log('连接成功')
}
// 获取子组件的表情包
const hand = (event: CustomEvent) => {
  const { emoji } = event.detail
  textarea.value += emoji
}

const send = () => {
  if (imageData.value) {

    //把自己发的信息  存入消息渲染列表中！！！
    lie.value.push({ id: 1, flag: true, message: imageData.value })

    //把我发的消息发送给后台，让后台返回信息
    ws.send(JSON.stringify({ id: 1, flag: true, message: imageData.value }))

    imageData.value = null
  } else {
    console.log(2, imageData.value)
    lie.value.push({ id: 1, flag: false, message: textarea.value })
    ws.send(JSON.stringify({ id: 1, flag: false, message: textarea.value }))
    textarea.value = ''
  }
}
ws.onmessage = e => {
  let list = JSON.parse(e.data)
  //把后台返回的消息存入渲染列表中
  lie.value.push(list)
}
  const show = ref(false);
const yulan = ()=>{
  show.value = true
}
</script>

<style lang="scss">
.jzong {
  width: 100vw;
  height: 100vh;
  background-color: #f9f7f7;
}
.miao {
  height: 0.9rem;
  background-color: #fff;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-around;
  color: #aaa9a9;
}

.fuw {
  width: 90%;
  height: 1.2rem;
  background-color: #fff;
  font-size: 0.35rem;
  margin-left: 5%;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
  .fw {
    height: 0.6rem;
    margin-left: 0.1rem;
  }
  .zhuan {
    height: 0.4rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 0.25rem;
    color: #aaa9a9;
  }
}
.fxtz {
  width: 85%;
  height: 1.1rem;
  margin-left: 5%;
  background-color: #e6e4e4;
  font-size: 0.28rem;
  padding: 0.2rem;
  margin-top: 0.2rem;
  border-radius: 0.1rem;
  span {
    color: #167dea;
  }
}
.liao {
  margin-top: 0.1rem;
  font-size: 0.3rem;
  padding-left: 0.2rem;
}
.a {
  width: 47%;
  float: right;
  padding: 0.2rem;
  background-color: #7bca68;
  margin-top: 0.2rem;
  border-radius: .2rem;
}
.left {
  width: 47%;
  float: left;
  padding: 0.2rem;
  margin-top: 0.2rem;
  background-color: #7dbdf9;
  border-radius: .2rem;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 2rem;
  background-color: #fff;
  font-size: 0.3rem;
  button {
    width: 1.1rem;
    height: 0.8rem;
    background-color: #167dea;
    color: #fff;
    border: none;
    border-radius: 0.1rem;
    font-size: 0.35rem;
    text-align: center;
    outline: none;
    position: fixed;
    bottom: 1.1rem;
    right: 0;
  }
  .bqb {
    font-size: 0.5rem;
    padding: 0;
    width: 0.6rem;
    height: 1rem;
    float: left;
    z-index: 999;
    line-height: 1rem;
    border: 0;
  }
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }


</style>
